<template>
	<el-row class='mb28'>
		<!-- 产品名称 -->
		<el-row class='text-left mt12  mb10'>{{pro_form.name}}</el-row>
		<!-- 产品详情 -->
		<el-col :md='24' :lg='12' align='left'>
			<el-card shadow="hover"  class='mb20'>
				<el-row>
		      		<el-tabs v-model="fir_activeName" >
		    			<el-tab-pane label="产品信息" name="first"></el-tab-pane>
		    		</el-tabs>
					<el-form  label-width="140px" size='small' class=''  :label-position="labelPosition">
						<el-row>
							<el-col :span='12'>
								<el-form-item label="产品类型：">{{pro_form.type  |  pro_type}}</el-form-item>
								<el-form-item label="起投额：">
								  		<span  v-if='pro_form.startingAmt!=null'>{{pro_form.startingAmt}} （万元）</span>
								  		<span  v-else>--</span>
								</el-form-item>
								<el-form-item label="所属项目：">{{project_form.prjName}}</el-form-item>
								<el-form-item label="资金路径：">{{pro_form.collectionAmtType | pro_route}}</el-form-item>
								<el-form-item label="收费方式：">{{pro_form.chargingMethod | project_fare_type}} {{pro_form.chargingValue}}</el-form-item>
								<el-form-item label="预计发行时间：">
								  		{{pro_form.estimatedReleaseTime | formatDates}}
								</el-form-item>
							</el-col>
							<el-col  :span='12'>
								<el-form-item label="产品规模：">{{pro_form.size}} （万元）</el-form-item>
								<el-form-item label="存续周期：">
								  		{{pro_form.subsistingCycle}}{{pro_form.subsistingCycleUnit | project_qixianUnit}}
								</el-form-item>
								<el-form-item label="交易所拟收费标准："  class='mt68'>
								  		<span  v-if='pro_form.chargesStandard!=""'>{{pro_form.chargesStandard}} % {{ pro_form.chargesMethod | pro_chargesMethod}}</span>
										<span  v-else>--</span>
								</el-form-item>
								<el-form-item label="产品兑付方式：">{{pro_form.cash | product_duifu}}</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-form-item label="备注信息："  >
							  	{{pro_form.comments}}
								<span  v-if='pro_form.comments==null'>--</span>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="产品文件："  style='margin-bottom: 0'></el-form-item>
							<el-table  :data="pro_form.productFileList" class='mb28  w-100'  :cell-class-name='hover'   @cell-click='checkUser' >
								<el-table-column  prop="fileName"       label="文件名称"     align="center" ></el-table-column>
								<el-table-column                        label="操作"          align="center"  >
									<template v-slot="list">
									    <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
									</template>
								</el-table-column>
						    </el-table>
						</el-row>
					</el-form>
				</el-row>
				<el-row  class='text-right  ft14'>
					  {{pro_form.createUserName}}  创建于  {{pro_form.modifyTime | formatDate}}
				</el-row>
		    </el-card>
		</el-col>	
		<!-- 项目详情 -->
		<el-col :md='23' :lg='{span:11,offset:1}' align='left'>
			<el-card shadow="hover" class='mb20'>
				<el-row>
		      		<el-tabs v-model="fir_activeName" >
		    			<el-tab-pane label="项目信息" name="first"></el-tab-pane>
		    		</el-tabs>
					<el-form  label-width="140px" size='small' class=''  :label-position="labelPosition">
						<el-col :span='12'>
							<el-form-item label="项目名称：">{{project_form.prjName}}</el-form-item>
							<el-form-item label="项目类型：">{{project_form.prjType | project_type}}</el-form-item>
							<el-form-item label="项目规模：" >
							  		<span  v-if='project_form.prjSize!=null'>{{project_form.prjSize}}（万元）</span>
									<span  v-else>--</span>
							</el-form-item>
					        <el-form-item label="融资主体性质：" >{{project_form.financingSubjectNature | project_rongzi}}</el-form-item>
							<el-form-item label="所属集团：" >{{project_form.affiliatedGroup}}</el-form-item>
							<el-form-item label="项目负责人：" >{{project_form.principalName}}</el-form-item>
							<el-form-item label="项目对接人：" >{{project_form.dockerName}}	</el-form-item>
							<el-form-item      label="项目存续周期："  class='inline-block '>
							    <span  v-if='project_form.subsistingCycle != null'>{{project_form.subsistingCycle}} 个月</span>
							</el-form-item>
							<el-form-item label="交易所拟收费标准：" >
							    <span  v-if='project_form.chargesStandard!=""'>{{project_form.chargesStandard}} % {{ project_form.chargesMethod | pro_chargesMethod}}</span>
								<span  v-else>--</span>
							</el-form-item>
							<el-form-item      label="收费方式：" >{{project_form.chargingMethod | project_fare_type}} {{project_form.chargingValue}}</el-form-item>
							<el-form-item      label="期望挂牌完成日期：" >
							    {{project_form.expCompleteDate | formatDates}}
							</el-form-item>
							<el-form-item   label='其他备注信息：'>{{project_form.comments}}</el-form-item>
						</el-col>
						<el-col  :span='12'>
							<el-form-item label="发行方：">{{project_form.issuerName}}</el-form-item>
							<el-form-item label="担保方：">{{project_form.bondingName}}</el-form-item>
							<el-form-item label="承销方：">{{project_form.underwriterName}}</el-form-item>
							<el-form-item label="律师事务所：">{{project_form.lawFirmName}}</el-form-item>
							<el-form-item label="受托管理方：">{{project_form.Administrator}}</el-form-item>
							<el-form-item label="投资顾问：">{{project_form.investment_adviser}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-row  class='text-right  ft14'>
					  {{project_form.createUserName}}  创建于  {{project_form.createTime | formatDate}}
				</el-row>
		    </el-card>
		</el-col>
	</el-row>
</template>

<script type="text/javascript">
//interface
import  { detailProduct }  from '@/api/professional_work/product/index'
import  { detailProject }  from  '@/api/professional_work/project/index'
import  { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/

export default {
	name: 'product_detail',
	data(){
		return {
			fir_activeName:'first',

			current_code:'',
			
			//产品信息
			pro_form:{

			},
			connect_project:'',//关联的项目code
			//项目信息
			project_form:{

			},
			labelPosition:'right',//label对齐方式
			
		}
	},
	created(){
		//网页宽度判断，更改布局
	   let clientWidth = document.body.clientWidth
	    if(clientWidth<600){
	      this.labelPosition='top'
	    }
		this.current_code = this.$route.query.code
		this.pageInit()
	},
	methods:{
		/*初始化 页面  S*/
		async pageInit(){
			let that =this
			// 获得产品详情
			await detailProduct(this.current_code).then(res => {
				if(res.data.flag == true){
					this.pro_form = res.data.data
					this.connect_project= this.pro_form.prjCode
				}
			})
			.catch(error => {
			    that.outputError(error)
			})
			
			await detailProject(this.connect_project).then(res=>{
				if(res.data.flag == true){
					this.project_form = res.data.data
					/*投资方，委托方回填*/
					this.project_form.projectEntList.forEach((item)=>{
						if(item.entRole == 1){
							this.project_form.issuerName = item.entName
						}
						if(item.entRole == 2){
							
							this.project_form.bondingName = item.entName
						}
						if(item.entRole == 3){
							this.project_form.underwriterName = item.entName
						}
						if(item.entRole == 4){
							this.project_form.lawFirmName = item.entName
						}
						if(item.entRole == 5){
							this.project_form.Administrator = item.entName
						}
						if(item.entRole == 6){
							this.project_form.investment_adviser = item.entName
						}
					})
				}
			})
			.catch(error => {
			    that.outputError(error)
			}) 
		    
		},
		/*初始化 页面  E*/

		/*表格操作 S*/
		hover({row, column, rowIndex, columnIndex}){
	        //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
	        if(columnIndex == 0 ){
	          return 'activeCol  spaceNowrap'
	        }
	    },

	   //点击表格第一列  查看详情
	    checkUser(row, column, cell, event){
	    	// console.log(row)
	        if(column.label == '文件名称' ){
	            /*预览文件*/
	            // getpdfcode(row.fileCode)
	            let pdfStr = row.fileName.search(/pdf/ig)
				if(pdfStr !=-1){
					/*pdf文档*/
					window.open('download_file?fileCode='+row.fileCode+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
				}
				else {
					//doc文档
					getpdfcode(row.fileCode)
				}
	        }
	    },
		/*表格操作 eE*/
     },
     components:{
     
     },
     
}
</script>

<style  scoped>
.form_auto{padding-right: 60px;}
.inline-input{width: 40%;}
@media screen and (max-width: 1418px) {
    .form_auto{padding-right: 0px;}
    .el-input--suffix .el-input__inner{padding-right: 18px;}
}

@media screen and (max-width: 1124px) {
    .inline-input{width: 80%;}
}

@media screen and (max-width: 1105px) {
    .pro_line{margin-left:120px;}
}
</style>